<template>
	<view class="classify-list">
		<view class="loading" v-if="!classList.length && !noMoreData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<navigator :url="'/pages/preview/preview?id=' + item._id" class="item" v-for="item in classList"
				:key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>

		</view>
		<view class="loading" v-if="classList.length || noMoreData">
			<uni-load-more :status="noMoreData ? 'noMore':'loading'"></uni-load-more>
		</view>
		<view class="safe-area-inset-bottom">

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		apiGetClassList,
		apiUserWallList
	} from '@/api/api.js'
	import {
		goToHome
	} from '@/utils/common.js'

	const classList = ref([])
	const noMoreData = ref(false)
	const param = {
		pageNum: 1,
		pageSize: 12
	}

	let pageTitle;

	onLoad((e) => {
		let {
			id = null, name = null, type = null
		} = e
		if (type) param.type = type
		if (id) param.classid = id

		pageTitle = name
		uni.setNavigationBarTitle({
			title: name
		})
		getClassList()
	})

	onPullDownRefresh(() => {
		param.pageNum = 1
		noMoreData.value = false;
		classList.value = []
		getClassList()
	})

	onReachBottom(() => {
		if (noMoreData.value) return
		param.pageNum += 1
		getClassList()
	})

	const getClassList = async () => {
		let res
		if (param.classid) {
			res = await apiGetClassList(param)
		}
		if (param.type) {
			res = await apiUserWallList(param)
		}
		uni.stopPullDownRefresh()
		console.log(res)
		classList.value = [...classList.value, ...res.data]
		if (param.pageSize > res.data.length) noMoreData.value = true
		uni.setStorageSync('store-class-list', classList.value)
		
	}
</script>

<style lang="scss" scoped>
	.classify-list {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;
			padding: 5rpx;

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>